import React, { useEffect, useState } from 'react'
import './style.css'
import { Table, Divider, Flex, Card, Button, Modal } from 'antd'
import type { TableProps } from 'antd'
import type {
  DeliverOrder,
  MatNoticeOrder,
  SignOrder,
  ShortOrder
} from './typings'
import { matNoticeFullColumns, deliveryFullColumns, signFullColumns, shortColumns } from './fields'
import { matTable, deliveryTable, signTable } from './data'

const Page: React.FC = () => {
  // const [showDeliveryTable,setShowDeliveryTable]=useState(false)
  // const [showSignTable,setShowSignTable]=useState(false)
  const [showPages, setShowPages] = useState(1)

  const [matNoticeColumns, setMatNoticeColumns] = useState(matNoticeFullColumns)
  const [deliveryColumns, setDeliveryColumns] = useState(deliveryFullColumns)
  const [signColumns, setSignColumns] = useState(signFullColumns)

  const [matNoticeCardWidth, setMatNoticeCardWidth] = useState('100%')
  const [deliveryCardWidth, setDeliveryCardWidth] = useState('100%')
  const [signCardWidth, setSignCardWidth] = useState('100%')

  const [selectedMatKeys, setSelectedMatKeys] = useState([])

  const [selectedDeliveryKeys, setSelectedDeliveryKeys] = useState([])

  const [loading, setLoading] = useState(false)
  const [openModal, setOpenModal] = useState(false)
  const refreshPage = () => {
    switch (showPages) {
      case 1:
        setMatNoticeColumns(matNoticeFullColumns)
        setDeliveryColumns(shortColumns)
        setSignColumns(shortColumns)
        setMatNoticeCardWidth('100%')
        setDeliveryCardWidth(null)
        setSignCardWidth(null)
        break
      case 2:
        setMatNoticeColumns(shortColumns)
        setDeliveryColumns(deliveryFullColumns)
        setSignColumns(shortColumns)
        setMatNoticeCardWidth('20%')
        setDeliveryCardWidth('80%')
        setSignCardWidth(null)
        break
      case 3:
        setMatNoticeColumns(shortColumns)
        setDeliveryColumns(shortColumns)
        setSignColumns(signFullColumns)
        setMatNoticeCardWidth('20%')
        setDeliveryCardWidth('20%')
        setSignCardWidth('60%')
        break
      default:
        alert('数据错误')
    }
  }
  useEffect(() => {
    refreshPage()
  }, [])

  useEffect(() => {
    refreshPage()
  }, [showPages])
  const matOnSelection = {

    selectedRowKeys: selectedMatKeys,
    onChange: (keys: React.Key[]) => {
      setSelectedMatKeys(keys)
      setShowPages(2)
    }
  }
  const deliveryOnSelection = {
    selectedRowKeys: selectedDeliveryKeys,
    onClick: () => {
      setOpenModal(true)
    },
    onChange: (keys) => {
      setSelectedDeliveryKeys(keys)
      setShowPages(3)
    }
  }

  const closeDeliveryCard = () => {
    setSelectedMatKeys([])
    setSelectedDeliveryKeys([])
    setShowPages(1)
  }
  const closeSignCard = () => {
    setSelectedDeliveryKeys([])
    setShowPages(2)
  }

  useEffect(() => {
    setSelectedDeliveryKeys([])
  }, [selectedMatKeys])
  return (
    <>
      <div style={{ width: '100%', height: '100%',display:'flex' }}>
        {showPages >= 1 ?
          <Card className={'flex-card'} style={{ width: matNoticeCardWidth }}>
            <Table columns={matNoticeColumns} rowSelection={{
              type: 'radio',

              ...matOnSelection
            }} dataSource={matTable}
                   onRow={() => (
                     {
                       onClick: () => {
                         if (showPages >= 2) {
                           setOpenModal(true)
                         }
                       }
                     }
                   )}
            />
          </Card>
          : null}
        {showPages >= 2 ?
          <Card className={'flex-card'} style={{ width: deliveryCardWidth }}
                extra={<Button type={'text'} onClick={closeDeliveryCard}>X</Button>}>
            <Table columns={deliveryColumns} rowSelection={{
              type: 'radio',
              ...deliveryOnSelection
            }} dataSource={deliveryTable}
                   onRow={() => (
                     {
                       onClick: () => {
                         if (showPages >= 3) {
                           setOpenModal(true)
                         }
                       }
                     }
                   )}
            />
          </Card>
          : null}
        {showPages >= 3 ?
          <Card className={'flex-card'} style={{ width: signCardWidth }}
                extra={<Button type={'text'} onClick={closeSignCard}>X</Button>}>
            <Table columns={signColumns} dataSource={signTable} />
          </Card>
          : null}
      </div>
      <Modal open={openModal} onOk={() => {
        setOpenModal(false)
      }} onCancel={() => setOpenModal(false)}>
        <Card>
          这是详情
        </Card>
      </Modal>
    </>
  )
}

export default Page
